<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户列表</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" type="image/x-icon" href="../dist/img/favicon.ico">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../dist/css/font-awesome.min.css">
    <!-- 以上为公共css -->

    <!-- app css -->
    <link rel="stylesheet" href="../assets/bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" href="../assets/toastr/toastr.min.css"/>
    <link rel="stylesheet" href="../assets/jsTree/jstree.style.min.css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">

    <div id="toolbar" class="btn-group">
        <button shiro:hasPermission="sys:user:add" id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
        </button>
        <button shiro:hasPermission="sys:user:update" id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改
        </button>
        <button shiro:hasPermission="sys:user:delete" id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
        </button>
    </div>
    <table id="userTable"></table>
</div>

<div class="modal fade" id="addUserModal">
    <div class="modal-dialog animated" style="width: 300px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center">添加用户</h4>
            </div>
            <div class="modal-body">
                <div class="form">
                    <form id="addUserForm">
                        <div class="form-group">
                            <label>用户名:</label>
                            <input id="user" class="form-control" type="text" placeholder="用户名" name="username">
                        </div>
                        <div class="form-group">
                            <label>密码:</label>
                            <input id="password" class="form-control" type="password" placeholder="密码" name="password">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="doAddUser">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" style="width: 500px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-center" id="exampleModalLabel"></h4>
            </div>
            <div class="modal-body">
                <form id="userEditForm">
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="userId" name="id">
                        <label for="userName" class="control-label">用户名称:</label>
                        <input type="text" class="form-control" id="userName" name="username" value="">
                    </div>
                    <div class="form-group">
                        <label class="control-label">昵称:</label>
                        <input type="text" class="form-control" id="nickname" name="nickname" value="">
                    </div>
                    <div class="form-group">
                        <label class="control-label">角色:</label>
                        <select class="form-control" id="roleId" name="roleId">

                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">年龄:</label>
                        <input type="text" class="form-control" id="age" name="age" value=""/>
                    </div>
                    <div class="form-group">
                        <label>性别:</label>
                        <input type="radio" id="female" name="sex" value="0"/><label>女 </label>
                        <input type="radio" id="male" name="sex" value="1"/><label>男 </label>
                        <input type="radio" checked="checked" id="fm" name="sex" value="2"/><label>保密 </label>
                    </div>
                    <div class="form-group">
                        <label>是否有效:</label>
                        <select class="form-control" name="isDelete" id="isDelete">
                            <option value="0">有效</option>
                            <option value="1">冻结</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery 2.2.3 -->
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!--app js -->
<script src="../assets/bootstrap-table/bootstrap-table.js"></script>
<script src="../assets/bootstrap-table/bootstrap-table-zh-CN.js"></script>
<script src="../assets/toastr/toastr.min.js"></script>
<script src="../assets/bootbox/bootbox.js"></script>
<script src="../assets/ExTable.js"></script>
<script src="../assets/app.js"></script>
<script src="../assets/jsTree/jstree.js"></script>
<script>
    loadUser()
</script>
</body>
</html>
